<template>
  <div class="box">
    <header class="header">
      <div class="my_PersonalHeader">
        <van-nav-bar
          title="个人信息"
          left-arrow
          @click-left="$router.go(-1)"
        />
      </div>
    </header>
    <div class="content">
      <div class="contents">
        <!-- 头像显示框,点击从页面下方弹出选择器 -->
        <van-cell is-link @click="HeadPortraitFn">头像
          <img src="../../lib/img/my/cunqianjihua@2x.png" alt="" style="width:.30rem;height:.30rem;float:right">
        </van-cell>
        <!-- 头像弹出框 -->
        <van-popup v-model="HeadPortrait" position="bottom" style="background-color: #eaeaea;">
          <van-button type="default" block>拍照</van-button>
          <van-button type="default" block>从相册里选</van-button>
          <van-button type="default" block style="margin-top:.2rem;">取消</van-button>
        </van-popup>
        <!-- id显示框,不可修改 -->
        <van-cell title="id" value="12456" />
        <!-- 昵称显示框,点击从中间弹出输入框 -->
        <van-cell is-link @click="NicknameFn">昵称
          <span style="float: right;">自律小宝贝</span>
        </van-cell>
        <!-- 昵称弹出框 -->
        <van-popup v-model="Nickname" >昵称</van-popup>
        <!-- 性别显示框,点击从页面下方弹出选择按钮 -->
        <van-cell is-link @click="SexFn">性别
          <span style="float: right;">女</span>
        </van-cell>
        <!-- 性别弹出框 -->
        <van-popup v-model="Sex" position="bottom" :style="{ height: '30%' }" >性别</van-popup>
        <!-- 手机号显示框,点击手机号跳转进入更改手机号的也页面 -->
        <van-cell is-link @click="$router.push('/my_Personal_Tel')">手机号
          <span style="float: right;">12306</span>
        </van-cell>
        <!-- 退出登录按钮 -->
        <van-button type="primary" size="large" color="#ffffff">
          <p style="color: black;">退出登录</p>
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar, Popup, Cell, CellGroup, Button } from 'vant'
Vue.use(NavBar)
Vue.use(Popup)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Button)
export default {
  // 设置data初始值
  data () {
    return {
      // 头像弹出
      HeadPortrait: false,
      // 昵称弹出
      Nickname: false,
      // 性别弹出
      Sex: false
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {},
  // 计算属性
  methods: {
    // 弹出头像更改
    HeadPortraitFn () {
      this.HeadPortrait = true
    },
    // 弹出昵称更改
    NicknameFn () {
      this.Nickname = true
    },
    // 弹出性别更改
    SexFn () {
      this.Sex = true
    }
  }
}
</script>

<style lang="scss">
// 样式
  @import "@/lib/reset.scss";
  .my_PersonalHeader {
    @include rect(100%, .6rem);
    @include background-color(#FDD949);
    /deep/ .van-nav-bar {
      height: .6rem;
      line-height: 0.6rem;
      text-align: center;
      background-color: #FDD949;
      user-select: none;
      /deep/ .van-icon-arrow-left {
        color: black;
      }
    }
  }
  .contents {
    height: 99%;
    background-color: #eaeaea;
    .van-cell {
      height: .49rem;
      margin-top: .01rem;
      @include border-radius(.1rem);
    }
    .van-button--primary {
      margin-top: .25rem;
    }
  }
</style>
